<h2 class="custom-h2">{{ 'SIDE_NAV.SYSTEM_MGMT.REGISTRY' | translate }}</h2>
<div class="content-top">
    <div class="row endpoint-view">
        <div>
            <div class="row flex-items-xs-between rightPos">
                <div class="flex-items-xs-middle option-right">
                    <hbr-filter
                        [withDivider]="true"
                        filterPlaceholder="{{
                            'REPLICATION.FILTER_TARGETS_PLACEHOLDER' | translate
                        }}"
                        (filterEvt)="doSearchTargets($event)"
                        [currentValue]="targetName"></hbr-filter>
                    <span class="refresh-btn" (click)="refreshTargets()">
                        <clr-icon shape="refresh"></clr-icon>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid
                (clrDgRefresh)="retrieve($event)"
                [clrDgLoading]="loading"
                [(clrDgSelected)]="selectedRow">
                <clr-dg-action-bar>
                    <button
                        id="add"
                        type="button"
                        class="btn btn-secondary"
                        (click)="openModal()">
                        <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                            'DESTINATION.NEW_ENDPOINT' | translate
                        }}
                    </button>
                    <button
                        id="edit"
                        type="button"
                        class="btn btn-secondary"
                        [disabled]="!(selectedRow.length === 1)"
                        (click)="editTargets(selectedRow)">
                        <clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{
                            'DESTINATION.EDIT' | translate
                        }}
                    </button>
                    <button
                        id="delete"
                        type="button"
                        class="btn btn-secondary"
                        [disabled]="!selectedRow.length"
                        (click)="deleteTargets(selectedRow)">
                        <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{
                            'DESTINATION.DELETE' | translate
                        }}
                    </button>
                </clr-dg-action-bar>
                <clr-dg-column [clrDgSortBy]="'name'" class="flex-min-width">{{
                    'DESTINATION.NAME' | translate
                }}</clr-dg-column>
                <clr-dg-column class="flex-min-width">{{
                    'DESTINATION.STATUS' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgField]="'url'" class="flex-min-width">{{
                    'DESTINATION.URL' | translate
                }}</clr-dg-column>
                <clr-dg-column>{{
                    'DESTINATION.PROVIDER' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="'insecure'">{{
                    'CONFIG.VERIFY_REMOTE_CERT' | translate
                }}</clr-dg-column>
                <clr-dg-column>{{
                    'DESTINATION.AUTHENTICATION' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="'creation_time'">{{
                    'DESTINATION.CREATION_TIME' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgField]="'description'">{{
                    'REPLICATION.DESCRIPTION' | translate
                }}</clr-dg-column>
                <clr-dg-placeholder>{{
                    'DESTINATION.PLACEHOLDER' | translate
                }}</clr-dg-placeholder>
                <clr-dg-row *ngFor="let t of targets" [clrDgItem]="t">
                    <clr-dg-cell class="flex-min-width">{{
                        t.name
                    }}</clr-dg-cell>
                    <clr-dg-cell class="flex-min-width">
                        <span
                            *ngIf="t.status === 'healthy'; else elseBlock"
                            class="label label-success"
                            >{{ 'SCANNER.HEALTHY' | translate }}</span
                        >
                        <ng-template #elseBlock>
                            <span class="label label-danger">{{
                                'SCANNER.UNHEALTHY' | translate
                            }}</span>
                        </ng-template>
                    </clr-dg-cell>
                    <clr-dg-cell class="flex-min-width">{{
                        t.url
                    }}</clr-dg-cell>
                    <clr-dg-cell>
                        <span class="margin-right-2px">{{
                            getAdapterText(t.type)
                        }}</span>
                    </clr-dg-cell>
                    <clr-dg-cell>
                        {{ !t.insecure }}
                    </clr-dg-cell>
                    <clr-dg-cell>{{ t.credential.type }}</clr-dg-cell>
                    <clr-dg-cell>{{
                        t.creation_time | harborDatetime : 'short'
                    }}</clr-dg-cell>
                    <clr-dg-cell>{{ t.description }}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
                    <clr-dg-pagination
                        #pagination
                        [clrDgPageSize]="pageSize"
                        [(clrDgPage)]="page"
                        [clrDgTotalItems]="total">
                        <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
                            'PAGINATION.PAGE_SIZE' | translate
                        }}</clr-dg-page-size>
                        <span *ngIf="total"
                            >{{ pagination.firstItem + 1 }} -
                            {{ pagination.lastItem + 1 }}
                            {{ 'DESTINATION.OF' | translate }}</span
                        >
                        {{ total }} {{ 'DESTINATION.ITEMS' | translate }}
                    </clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>
    <confirmation-dialog
        #confirmationDialog
        (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
    <hbr-create-edit-endpoint
        (reload)="refreshTargets()"></hbr-create-edit-endpoint>
</div>
